<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-aside class="header">
        <!--  第一个表格-->
        <div class="table-list1">
          <el-table :span-method="genderSpanCity" border :data="form.tableList"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="materialName" :label="$t('wms.materialName')" width="150"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="200">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="locationName" :label="$t('wms.position')" width="220">
              <!--              <template #default="scope">-->
              <!--                <el-input v-model="scope.row.position" autocomplete="off" size="large" style="width: 90%" :placeholder="$t('wms.pleaseEnter')"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="barcode" :label="$t('wms.barcode')" width="260">
              <template #default="scope">
                <el-input v-model="scope.row.barcode" autocomplete="off" size="large" style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="todayGrabQty" :label="$t('wms.todayQty')" width="220">
              <template #default="scope">
                <el-input v-model="scope.row.todayGrabQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="yesterdayGrabQty" :label="$t('wms.yesterdayQty')" width="220">
              <template #default="scope">
                <el-input v-model="scope.row.yesterdayGrabQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第二个表格-->
        <div class="table-list2 table-list1">
          <el-table :span-method="genderSpanCity2" border :data="form.tableList2"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList2,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="locationName" :label="$t('wms.position')" width="220">
              <!--              <template #default="scope">-->
              <!--                <el-input v-model="scope.row.position" autocomplete="off" size="large" style="width: 90%" :placeholder="$t('wms.pleaseEnter')"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="barcode" :label="$t('wms.barcode')" width="260">
              <template #default="scope">
                <el-input v-model="scope.row.barcode" autocomplete="off" size="large" style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="stackingQty" :label="$t('wms.palletizes')" width="440">
              <template #default="scope">
                <el-input v-model="scope.row.stackingQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList2)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第三个表格-->
        <div class="table-list3 table-list1">
          <el-table :span-method="genderSpanCity3" border :data="form.tableList3"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList3,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="locationName" :label="$t('wms.position')" width="220">
              <!--              <template #default="scope">-->
              <!--                <el-input v-model="scope.row.position" autocomplete="off" size="large" style="width: 90%" :placeholder="$t('wms.pleaseEnter')"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="barcode" :label="$t('wms.barcode')" width="260">
              <template #default="scope">
                <el-input v-model="scope.row.barcode" autocomplete="off" size="large" style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="todayGrabQty" :label="$t('wms.todayQty')" width="220">
              <template #default="scope">
                <el-input v-model="scope.row.todayGrabQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="yesterdayGrabQty" :label="$t('wms.yesterdayQty')" width="220">
              <template #default="scope">
                <el-input v-model="scope.row.yesterdayGrabQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList3)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第四个表格-->
        <div class="table-list3 table-list1">
          <el-table :span-method="genderSpanCity4" border :data="form.tableList4"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                @change="dateClick(form.tableList4,scope.row.checkDate)"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="locationName" :label="$t('wms.position')" width="220">
              <!--              <template #default="scope">-->
              <!--                <el-input v-model="scope.row.position" autocomplete="off" size="large" style="width: 90%" :placeholder="$t('wms.pleaseEnter')"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="barcode" :label="$t('wms.barcode')" width="260">
              <template #default="scope">
                <el-input v-model="scope.row.barcode" autocomplete="off" size="large" style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="stackingNotCastQty" :label="$t('wms.ununloaded')" width="440">
              <template #default="scope">
                <el-input v-model="scope.row.stackingNotCastQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList4)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第五个表格-->
        <div class="table-list3 table-list1">
          <el-table :span-method="genderSpanCity5" border :data="form.tableList5"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList5,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="locationName" :label="$t('wms.position')" width="220">
              <!--              <template #default="scope">-->
              <!--                <el-input v-model="scope.row.position" autocomplete="off" size="large" style="width: 90%" :placeholder="$t('wms.pleaseEnter')"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column prop="packagingOnline" :label="$t('wms.packaging')" width="350">
              <template #default="scope">
                <el-input v-model="scope.row.packagingOnline" autocomplete="off" size="large" style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="yesterdayPackagingOnline" :label="$t('wms.yesterdaysPackage')" width="350">
              <template #default="scope">
                <el-input v-model="scope.row.yesterdayPackagingOnline" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList5)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第6个表格-->
        <div class="table-list3 table-list1">
          <el-table border :data="form.tableList6"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList6,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="subproductQty" :label="$t('wms.defectiveQty')" width="920">
              <template #default="scope">
                <el-input v-model="scope.row.subproductQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.defectiveQty')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList6)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}
            </el-button>
          </div>
        </div>
        <!--  第7个表格-->
        <div class="table-list3 table-list1">
          <el-table border :data="form.tableList7"
                    style="width: 100%;"
                    :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                    :cell-style="{ textAlign: 'center' ,borderColor:'#aba2a2'}" :current-page="data.currentPage"
                    :highlight-current-row="true" :fit="true" stripe table-layout="fixed" header-align="center">
            <el-table-column type="id" label="id" v-if="false"></el-table-column>
            <el-table-column prop="processName" :label="$t('mes.processCode')" width="120"></el-table-column>
            <el-table-column prop="checkDate" :label="$t('wms.dates')" width="350">
              <template #default="scope">
                <el-date-picker v-model="scope.row.checkDate" type="date" size="large"
                                @change="dateClick(form.tableList7,scope.row.checkDate)"
                                style="width:90%" :placeholder="$t('wms.dates')" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"/>
              </template>
            </el-table-column>
            <el-table-column prop="subproductQty" :label="$t('wms.defectiveQty')" width="920">
              <template #default="scope">
                <el-input v-model="scope.row.subproductQty" autocomplete="off" size="large" type="number"
                          style="width: 90%"
                          :placeholder="$t('wms.defectiveQty')"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('wms.remark')">
              <template #default="scope">
                <el-input v-model="scope.row.remark" autocomplete="off" size="large" style="width: 95%"
                          :placeholder="$t('wms.pleaseEnter')"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="button">
            <el-button type="primary" @click="saveTable(form.tableList7)" class="add" style="margin-right:7px">{{
                $t('wms.save')
              }}</el-button>
          </div>
        </div>
      </el-aside>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import processLine from '@/components/mes/common/processLine'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import { getList, saveList } from '@/api/mesApi'
import useI18n from '@/hooks/language'
import { ElMessage } from 'element-plus'

const { t } = useI18n()

const data = reactive({
  ready: false,
  count: 1,
  checkDate: new Date().getFullYear() + '-' + (Number(new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1) + '-' + (Number(new Date().getDate()) < 10 ? '0' + new Date().getDate() : new Date().getDate())
})

const form = reactive({
  tableList: [
    {
      processName: '贴合上料口',
      materialName: '发泡板',
      checkDate: '',
      locationName: '1号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '发泡板',
      checkDate: '',
      locationName: '2号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '发泡板',
      checkDate: '',
      locationName: '3号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '发泡板',
      checkDate: '',
      locationName: '4号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '上基材',
      checkDate: '',
      locationName: '1号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '上基材',
      checkDate: '',
      locationName: '2号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '上基材',
      checkDate: '',
      locationName: '3号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合上料口',
      materialName: '上基材',
      checkDate: '',
      locationName: '4号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }],
  tableList2: [
    {
      processName: '贴合下料口码垛',
      checkDate: '',
      locationName: '1号码垛',
      barcode: '',
      stackingQty: null,
      remark: ''
    }, {
      processName: '贴合下料口码垛',
      checkDate: '',
      locationName: '2号码垛',
      barcode: '',
      stackingQty: null,
      remark: ''
    }, {
      processName: '贴合下料口码垛',
      checkDate: '',
      locationName: '3号码垛',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '贴合下料口码垛',
      checkDate: '',
      locationName: '4号码垛',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }],
  tableList3: [
    {
      processName: '锯开检上料口',
      checkDate: '',
      locationName: '1号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '锯开检上料口',
      checkDate: '',
      locationName: '2号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '锯开检上料口',
      checkDate: '',
      locationName: '3号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }, {
      processName: '锯开检上料口',
      checkDate: '',
      locationName: '4号上料口',
      barcode: '',
      todayGrabQty: null,
      yesterdayGrabQty: null,
      remark: ''
    }],
  tableList4: [
    {
      processName: '单碟码垛',
      checkDate: '',
      locationName: '1号码垛',
      barcode: '',
      stackingNotCastQty: null,
      remark: ''
    },
    {
      processName: '单碟码垛',
      checkDate: '',
      locationName: '2号码垛',
      barcode: '',
      stackingNotCastQty: null,
      remark: ''
    }
  ],
  tableList5: [
    {
      processName: '包装',
      checkDate: '',
      locationName: '1号包装',
      barcode: '',
      packagingOnline: null,
      yesterdayPackagingOnline: null,
      remark: ''
    },
    {
      processName: '包装',
      checkDate: '',
      locationName: '2号包装',
      barcode: '',
      packagingOnline: null,
      yesterdayPackagingOnline: null,
      remark: ''
    }
  ],
  tableList6: [
    {
      processName: 'JKJ',
      checkDate: '',
      subproductQty: null,
      remark: ''
    }
  ],
  tableList7: [
    {
      processName: 'PE',
      checkDate: '',
      subproductQty: null,
      remark: ''
    }
  ]
})
//
onMounted(() => {
  data.ready = true
  listSelect()
})

const listSelect = () => {
  getList({ checkDate: data.checkDate }).then(res => {
    if (JSON.stringify(res) === '{}') {
      data.tableList = [
        {
          processName: '贴合上料口',
          materialName: '发泡板',
          checkDate: '',
          locationName: '1号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '发泡板',
          checkDate: '',
          locationName: '2号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '发泡板',
          checkDate: '',
          locationName: '3号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '发泡板',
          checkDate: '',
          locationName: '4号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '上基材',
          checkDate: '',
          locationName: '1号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '上基材',
          checkDate: '',
          locationName: '2号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '上基材',
          checkDate: '',
          locationName: '3号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合上料口',
          materialName: '上基材',
          checkDate: '',
          locationName: '4号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }]
      data.tableList2 = [
        {
          processName: '贴合下料口码垛',
          checkDate: '',
          locationName: '1号码垛',
          barcode: '',
          stackingQty: null,
          remark: ''
        }, {
          processName: '贴合下料口码垛',
          checkDate: '',
          locationName: '2号码垛',
          barcode: '',
          stackingQty: null,
          remark: ''
        }, {
          processName: '贴合下料口码垛',
          checkDate: '',
          locationName: '3号码垛',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '贴合下料口码垛',
          checkDate: '',
          locationName: '4号码垛',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }]
      data.tableList3 = [
        {
          processName: '锯开检上料口',
          checkDate: '',
          locationName: '1号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '锯开检上料口',
          checkDate: '',
          locationName: '2号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '锯开检上料口',
          checkDate: '',
          locationName: '3号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }, {
          processName: '锯开检上料口',
          checkDate: '',
          locationName: '4号上料口',
          barcode: '',
          todayGrabQty: null,
          yesterdayGrabQty: null,
          remark: ''
        }]
      data.tableList4 = [
        {
          processName: '单碟码垛',
          checkDate: '',
          locationName: '1号码垛',
          barcode: '',
          stackingNotCastQty: null,
          remark: ''
        },
        {
          processName: '单碟码垛',
          checkDate: '',
          locationName: '2号码垛',
          barcode: '',
          stackingNotCastQty: null,
          remark: ''
        }
      ]
      data.tableList5 = [
        {
          processName: '包装',
          checkDate: '',
          locationName: '1号包装',
          barcode: '',
          packagingOnline: null,
          yesterdayPackagingOnline: null,
          remark: ''
        },
        {
          processName: '包装',
          checkDate: '',
          locationName: '2号包装',
          barcode: '',
          packagingOnline: null,
          yesterdayPackagingOnline: null,
          remark: ''
        }
      ]
      data.tableList6 = [
        {
          processName: 'JKJ',
          checkDate: '',
          subproductQty: null,
          remark: ''
        }
      ]
      data.tableList7 = [
        {
          processName: 'PE',
          checkDate: '',
          subproductQty: null,
          remark: ''
        }
      ]
      return
    }

    if (res.贴合上料口) {
      form.tableList = res.贴合上料口
    }
    if (res.贴合下料口码垛) {
      form.tableList2 = res.贴合下料口码垛
    }
    if (res.锯开检上料口) {
      form.tableList3 = res.锯开检上料口
    }
    if (res.单碟码垛) {
      form.tableList4 = res.单碟码垛
    }
    if (res.包装) {
      form.tableList5 = res.包装
    }
    if (res.JKJ) {
      form.tableList6 = res.JKJ
    }
    if (res.PE) {
      form.tableList7 = res.PE
    }
  })
}
// 保存
const saveTable = (list) => {
  console.log(list)
  saveList(list).then(res => {
    if (res.statusCode === 200) {
      ElMessage(res.message)
    }
    listSelect()
  })
}

// 更改日期 1-5个表格
const dateClick = (a, e) => {
  const times = e
  data.checkDate = e
  a.forEach((item, index) => {
    if (index < a.length) {
      a[index].checkDate = times
    }
  })
  listSelect()
}

// 合并前两行
const genderSpanCity = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = form.tableList[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < form.tableList.length; i++) {
        const nextRow = form.tableList[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

const genderSpanCity2 = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = form.tableList2[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < form.tableList2.length; i++) {
        const nextRow = form.tableList2[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

const genderSpanCity3 = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = form.tableList3[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < form.tableList3.length; i++) {
        const nextRow = form.tableList3[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

const genderSpanCity4 = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = form.tableList4[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < form.tableList4.length; i++) {
        const nextRow = form.tableList4[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}

const genderSpanCity5 = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = form.tableList5[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < form.tableList5.length; i++) {
        const nextRow = form.tableList5[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
